<template>
  <div>
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
      style="background-color: #3296fa; color: #fff"
    />
    <input
      type="file"
      hidden
      ref="input"
      multiple
      accept=".jpg,.png"
      @change="selected"
    />
    <van-cell is-link title="头像" @click="$refs.input.click()">
      <van-image round width="0.8rem" height="0.8rem" :src="userInfo.photo" />
    </van-cell>
    <van-cell is-link title="昵称" @click="isShowNcname = true"
      ><span>{{ userInfo.name }}</span></van-cell
    >
    <van-cell is-link title="性别" @click="isShowSex = true"
      ><span>{{ userInfo.gender === 1 ? '女' : '男' }}</span></van-cell
    >
    <van-cell is-link title="生日" @click="isShowBir = true"
      ><span>{{ userInfo.birthday }}</span></van-cell
    >
    <!-- 显示昵称弹层 -->
    <van-popup
      v-model="isShowNcname"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <update-name
        @uuname="isShowNcname = false"
        :name.sync="userInfo.name"
        v-if="userInfo.name && isShowNcname"
      ></update-name>
    </van-popup>
    <!-- 性别弹层 -->
    <van-popup v-model="isShowSex" position="bottom" :style="{ height: '40%' }">
      <update-sex
        v-if="userInfo.name && isShowSex"
        :sex.sync="userInfo.gender"
        @close="isShowSex = false"
      ></update-sex>
    </van-popup>
    <!-- 更新生日弹层 -->
    <van-popup v-model="isShowBir" position="bottom" :style="{ height: '40%' }">
      <update-bir
        :birthday.sync="userInfo.birthday"
        v-if="userInfo.birthday && isShowBir"
        @close="isShowBir = false"
      ></update-bir>
    </van-popup>
    <!-- 更新头像弹层 -->
    <van-popup v-model="isShowTx" position="bottom" :style="{ height: '100%' }">
      <update-avatar
        :photo="photo"
        @close="isShowTx = false"
        v-if="isShowTx"
        @update:photo="userInfo.photo = $event"
      ></update-avatar>
    </van-popup>
  </div>
</template>

<script>
import { getUserInfoAPI } from '@/api'
import { resolveToBase64 } from '@/utils'
import UpdateName from './componrnts/UpdateName.vue'
import UpdateSex from './componrnts/UpdateSex.vue'
import UpdateBir from './componrnts/UpdateBir.vue'
import UpdateAvatar from './componrnts/UpdateAvatar.vue'

export default {
  components: { UpdateName, UpdateSex, UpdateBir, UpdateAvatar },
  data() {
    return {
      userInfo: {},
      isShowNcname: false,
      isShowSex: false,
      isShowBir: false,
      isShowTx: false,
      photo: ''
    }
  },
  created() {
    this.getUserINfo()
  },
  methods: {
    async getUserINfo() {
      const { data } = await getUserInfoAPI()
      this.userInfo = data.data
      // console.log(data.data)
    },
    async selected() {
      const file = this.$refs.input.files[0]
      console.log(file)
      const base = await resolveToBase64(file)
      // console.log(base)
      this.photo = base
      this.isShowTx = true
      this.$refs.input.value = ''
    }
  }
}
</script>

<style></style>